<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev disabled">
          <a
            :disabled="curPage - 1 < 1"
            @click="
              if (curPage - 1 >= 1) {
                curPage = curPage - 1
              }
            "
            >«上一页</a
          >
        </li>
        <!--第一页-->
        <li
          :class="{ active: curPage == 1 }"
          v-show="startPageAndendPage.start != 1"
          @click="changePageNum(1)"
        >
          <a>1</a>
        </li>
        <li class="dotted" v-show="startPageAndendPage.start > 2">
          <span>...</span>
        </li>
        <!-- 连续页码 -->
        <li
          v-for="Num in pageNumArr"
          :key="Num"
          :class="{ active: curPage == Num }"
          @click="changePageNum(Num)"
        >
          <a>{{ Num }}</a>
        </li>

        <li class="dotted" v-show="startPageAndendPage.end < pageNum - 1">
          <span>...</span>
        </li>
        <!-- 最后一页 -->
        <li
          :class="{ active: curPage == pageNum }"
          v-show="startPageAndendPage.end != pageNum"
          @click="changePageNum(pageNum)"
        >
          <a>{{ pageNum }}</a>
        </li>
        <li class="next">
          <a
            :disabled="curPage + 1 > pageNum"
            @click="
              if (curPage + 1 <= pageNum) {
                curPage = curPage + 1
              }
            "
            >下一页»</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //总的元素个数
    totalNum: {
      require: true,
      type: Number
    },
    //需要展示的连续页面数
    continuousPageNum: {
      require: true,
      type: Number
    },
    //一个页面展示的元素个数
    showNum: {
      require: true,
      type: Number
    }
  },
  data() {
    return {
      //当前页
      curPage: 1
    }
  },
  computed: {
    //一共需要多少个页面
    pageNum() {
      // 如果为0返回1
      return Math.ceil(this.totalNum / this.showNum) || 1
    },
    // 开始,结束页码
    startPageAndendPage() {
      let start = 0,
        end = 0

      start = this.curPage - parseInt(this.continuousPageNum / 2)
      end = this.curPage + parseInt(this.continuousPageNum / 2)

      // 起始点超出范围,终点没超
      if (start < 1 && end <= this.pageNum) {
        start = 1
        end = start + this.continuousPageNum - 1
        if (end > this.pageNum) end = this.pageNum
      }
      // 起始点没超范围,终点超出范围
      else if (start >= 1 && end > this.pageNum) {
        end = this.pageNum
        start = end - this.continuousPageNum + 1
        if (start < 1) start = 1
      }
      // 起始点超出范围,终点超出范围
      else if (start < 1 && end > this.pageNum) {
        end = this.pageNum
        start = 1
      }

      return { start, end }
    },

    pageNumArr() {
      let arr = []
      for (
        let i = this.startPageAndendPage.start, j = 0;
        i < this.startPageAndendPage.end + 1;
        i++, j++
      ) {
        arr[j] = i
      }
      return arr
    }
  },
  watch: {
    curPage(newVal) {
      this.$emit('pageNumChange', newVal)
    }
  },
  methods: {
    // 跳转页码
    changePageNum(num) {
      this.curPage = num
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 733px;
  height: 66px;
  margin: auto;
  overflow: hidden;
  .sui-pagination {
    margin: 18px 0;
    ul {
      margin: auto;
      vertical-align: middle;
      width: 490px;
      li {
        line-height: 18px;
        display: inline-block;
        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }
        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }
        &.prev {
          a {
            background-color: #fafafa;
          }
        }
        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }
        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }
        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }
    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;
    }
  }
}
</style>
